<!doctype html>
<html>

<head>
	<title></title>
	<meta charset="utf-8" />
</head>
<style type="text/css">
	* {
		margin: 0px;
		padding: 0px;
	}
</style>

<body>
	用户名：<input id="username" type="text" placeholder="用户名有数字，字母下划线组成，但不能以数字开头，2-10位" /><span id="showUser"></span><br />
	密　码：<input id="userpass" type="password" placeholder="必须是数字，6-16" /><span id="showPass"></span><br />
	<input id="btnReg" type="button" value="注册" />
	<div id="messageBox">

	</div>
</body>

</html>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
	//一、先做前端的表单验证（正则时讲过），
	// 表单验证：非空判断，格式是否正确


	//二、后端验证：
	//  发送请求，在数据库中查找用户名是否存在


	//三、以上验证都没有问题，才进行注册。


	// -----------------------

	// 一、先做前端的表单验证
	//功能：所有前端的验证；
	function isTest() {
		return isUserName() && isPass();
	}

	//1、用户名的前端验证
	function isUserName() {
		//1)、非空判断
		if ($("#username").val() == "") {
			return false;
		}
		//2)、格式判断
		// 用户名有数字，字母下划线组成，但不能以数字开头，2-10位
		let reg = /^[a-zA-Z_]\w{1,9}$/;
		// 改成手机号验证
		if (!reg.test($("#username").val())) {
			return false;
		}
		return true;
	}


	//2、密码的前端验证
	function isPass() {
		//1)、非空判断
		if ($("#userpass").val() == "") {
			return false;
		}
		//2)、格式判断
		// 数字，6-16位
		let reg = /^\d{6,16}$/;
		if (!reg.test($("#userpass").val())) {
			return false;
		}
		return true;
	}

	//二、后端验证
	let hasUser = false; //该用户名不存在
	function hasUserBack() {
		//后端验证用户名是否存在
		$.get("checkUser.php", {
			"username": $("#username").val()
		}, function (data) {
			if (data == "0") {
				$("#showUser").html("亲，该用户名已经存在，请重新思考！");
				$("#showUser").css({
					"color": "red"
				});
				hasUser = true;
			} else {
				$("#showUser").html("亲，该用户名可以使用，赶紧注册吧！");
				$("#showUser").css({
					"color": "green"
				});
				hasUser = false;
			}
		})
	}

	$(function () {
		$("#username").blur(function () {
			//1、前端验证
			if (isUserName() == false) {
				$("#showUser").html("亲，用户名的格式不正确！");
				return;
			}
			//2、后端的验证
			hasUserBack();
		});

		$("#userpass").blur(function () {
			//1、前端验证
			if (isPass() == false) {
				$("#showPass").html("亲，密码格式不正确	！");
				return;
			} else {
				$("#showPass").html("√");
			}
		});

		$("#btnReg").click(function () {
			//1、前端验证
			console.log("aaa");
			if (isTest() == false) {
				$("#messageBox").html("亲，您的信息输入不全");
				return;
			}
			//2、用户名是否存在(后端验证)
			if (hasUser) {
				return;
			}

			$.post(
				"addUser.php", {
					"username": $("#username").val(),
					"userpass": $("#userpass").val()
				},
				function (data) {
					if (data == "success") {
						$("#messageBox").css({
							"color": "green"
						});
						$("#messageBox").html("恭喜您，注册成功！2秒后跳转到<a href='login.html'>登录</a>页面");
						setTimeout(() => {
							location.href = "login.html";
						}, 2000);
					} else if (data == "fail") {
						$("#messageBox").css({
							"color": "red"
						});
						$("#messageBox").html("不好意思，注册失败!");
					} else {
						$("#messageBox").css({
							"color": "red"
						});
						$("#messageBox").html("不好意思，服务器出问题了!");
					}
				}
			);
		});
	});
</script>